<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>DOC 文档</title>
    <script src='/Plus/jquery.min.js'></script>
    <script src="/Plus/jstree/jstree.min.js"></script>
    <link rel="stylesheet" href="/Plus/jstree/themes/default/style.css" />
    <link rel="stylesheet" type="text/css" href="/Plus/jstree/themes/default.css" />
</head>
<body>
<div id='loading' >
    <img src="/Plus/jstree/loading.gif"/>
</div>
<div class='header'>
    {{ catinfo.name }}
</div>
<div id='main'>
    <div id='left_btn'>&nbsp;&lsaquo;</div>
    <div id='left'>
        <div id="tree"></div>
    </div>
    <div id='right'>
        <iframe id='fm' src="{{ fristUrl }}" frameborder="0"></iframe>
    </div>
</div>
</body>
</html>
<script>
    var mHeight = 1;
    if(!+[1,]){		//判断IE差异防止出现滚动条
        mHeight = 5;
    }

    $(function (){
        $("#main").css("height",$(window).height()-60-mHeight);
        $("#left").css("width",$("#left").width()-1);
        $("#fm,ul").css("height",$(window).height()-60-mHeight);
        $('#tree').jstree({
            'core' : {
                'data' : {
                    'url' : '{{ url('/book/articles') }}',
                    'data' : function (node) {
                        $("#loading").css("background",'none').hide();
                        return { 'id' : {{ catinfo.id }} };
                    }
                },
                //'check_callback' : true,
                'themes' : {
                    "dots": true,
                    "icons": false  ,
                    'responsive' : true
                }
            },
            'force_text' : true,
            'plugins' : ['wholerow']		//使用
        }).on("changed.jstree", function (e, data) {
            $("#loading").show();
            var id  = data.selected;
            var baseUrl = "{{ url('/book/info') }}";
            if(!id) return false;
            $("#fm").attr('src',baseUrl+"&id="+id);
        });
        $("li").click(function (){
            var url = $(this).attr('url');
            if(!url) return false;
            $("#fm").attr('src',url);
        });
        $("#left_btn").css("left",$("#left").width()-10).click(function (){
            if($(this).hasClass('close')){
                $("#left").show();
                $("#right").css("width","80%");
                $("#left_btn").css("left",$("#left").width()-10);
                $(this).removeClass("close").html("&lsaquo;");
            }else{
                $("#left").hide();
                $("#right").css("width","100%");
                $("#left_btn").css("left",-10);
                $(this).addClass("close").html("&rsaquo;");
            }
        });
    })
</script>